<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>S.E.</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="S.E.">
<meta property="og:url" content="http://seveneyes.top/index.html">
<meta property="og:site_name" content="S.E.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="S.E.">
  
    <link rel="alternate" href="/atom.xml" title="S.E." type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">S.E.</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">成功的人抄袭，伟大的人剽窃</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://seveneyes.top"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-入门教程" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2018/03/27/入门教程/" class="article-date">
  <time datetime="2018-03-27T11:26:24.312Z" itemprop="datePublished">2018-03-27</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2018/03/27/入门教程/">入门教程</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="一·工具安装"><a href="#一·工具安装" class="headerlink" title="一·工具安装"></a>一·工具安装</h2><p>1.vscode的下载<br><a href="https://code.visualstudio.com/" target="_blank" rel="external">vscode官方下载</a><br>2.node.js的下载安装<br><a href="https://nodejs.org/en/" target="_blank" rel="external">node.js的下载</a><br>这里的话下载8.1版本的就ok了<br><a href="http://www.runoob.com/nodejs/nodejs-tutorial.html" target="_blank" rel="external">这里是node.js的菜鸟教程</a><br>进入命令行的话，百度吧，我实在不知道从哪开始写了<br>安装完成之后在命令行执行 按回车执行<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">node -v</div></pre></td></tr></table></figure></p>
<p>大致如图<br>反馈的是版本号，证明你node.js已经安装了<br><img src="http://ow47touqj.bkt.clouddn.com/1522152923%281%29.jpg" alt=""></p>
<p>假设你已经安装完成了这两样工具，现在就开始吧!</p>
<p>##二.vscode的简单使用<br>1.现在，让我们打开vscode;<br><img src="http://ow47touqj.bkt.clouddn.com/vscode1.png" alt=""><br>接下来点击右边的新建文件,箭头所至，然后点击打开文件夹<br><img src="http://ow47touqj.bkt.clouddn.com/vscode2.png" alt=""><br>这里我在桌面新建一个名为test的文件夹，大家可以新建一个文件，把以后的所有代码文件都放到这里面<br><img src="http://ow47touqj.bkt.clouddn.com/vscode3.png" alt=""><br>然后添加文件<br><strong>注意后缀名，这里我是命名为index.html</strong>创建了一个html文件<br><img src="http://ow47touqj.bkt.clouddn.com/vscode4.png" alt=""><br>这里我们就可以在右边开始写东西了<br><img src="http://ow47touqj.bkt.clouddn.com/vscode5.png" alt=""><br>输入html会自动出现选项，在html:5这一项回车<br><img src="http://ow47touqj.bkt.clouddn.com/vscode6.png" alt=""><br>这里我在body标签里面写了一个h1标签，关于页面的各种标签已经用法，请大家在w3c上进行学习，这里我就不多说啦<br><a href="http://www.w3school.com.cn/html/index.asp" target="_blank" rel="external">附上w3c的地址</a></p>
<p><strong>好了重点来了</strong><br>大家需要安装一个扩展 view in Browser</p>
<p>点击上方的 查看 -&gt; 扩展 然后搜索view in Browser<br><img src="http://ow47touqj.bkt.clouddn.com/vscode7.png" alt=""><br>安装完之后，好像需要手动点开才行<br>这个时候就可以直接从vscode里点开html文件了,鼠标右键点击，选择view in Browser<br>ps:这里我截不到图，就只能这样了<br><img src="http://ow47touqj.bkt.clouddn.com/vscode8.png" alt=""><br>点开之后，就会在你的默认浏览器中打开这个html页面了<br><img src="http://ow47touqj.bkt.clouddn.com/vscode9.png" alt=""><br>这个就是你的第一个页面啦，虽然没有什么东西，但是是你自己创造的啊</p>
<p>##js部分##<br>创建一个index.js文件<br><img src="http://ow47touqj.bkt.clouddn.com/vscode10.png" alt=""><br>写上如图的代码<br>这个时候，我们在点击目录上的index.js文件，类似于上面的打开view in Browser，这里我们选择<code>在命令行打开</code><br><img src="http://ow47touqj.bkt.clouddn.com/vscode11.png" alt=""><br>如图输入,ps：这里的index.js是你需要运行的文件名,别忘了用回车执行<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">node index.js</div></pre></td></tr></table></figure></p>
<p>到这里之后，想必你已经会使用vscode来写你人生的第一个页面，用node来运行你人生的第一个js程序了吧！</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2018/03/27/入门教程/" data-id="cjf9vxkwh0003f4qsiglvdrbt" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-jasmine测试框架的使用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/21/jasmine测试框架的使用/" class="article-date">
  <time datetime="2017-11-21T11:52:46.197Z" itemprop="datePublished">2017-11-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/21/jasmine测试框架的使用/">jasmine测试框架的使用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><strong>写这个其实一点底没有，自己也是一知半解，如果有什么错误，请指出，QQ:839187405(后期可能会完善)</strong></p>
<h2 id="一·介绍"><a href="#一·介绍" class="headerlink" title="一·介绍"></a>一·介绍</h2><p>Jasmine就是一种JavaScript单元测试框架，它不依赖任何其他JS框架，也不需要对DOM操作，具有灵巧而明确的语法可以让你轻松的编写测试代码。它是一套Javascript行为驱动开发框架（BDD），干净简洁，表达力强且易于组织，不依赖于其他任何框架和DOM，可运行于Node.js，浏览器端或移动端。<br><strong>这里有官方的文档，github的源码下载</strong><br>现在是2017-11-21，jasmine是2.8版本;</p>
<ul>
<li><a href="https://jasmine.github.io/" target="_blank" rel="external">jsamine官方文档</a></li>
<li><a href="https://github.com/jasmine/jasmine/releases" target="_blank" rel="external">github下载源码</a></li>
</ul>
<h2 id="二·安装"><a href="#二·安装" class="headerlink" title="二·安装"></a>二·安装</h2><p>在一个文件夹下执行以下的命令。对了，首先你需要有npm这个包管理工具<br>说句题外话，npm是真的牛逼，全世界的可重用代码都在里面，里面就是各式各样的轮子，现在我们只需要会用这些轮子就好了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install jasmine</div></pre></td></tr></table></figure>
<p>执行了上面的命令后，你的文件里会多出node_modules文件夹和package-lock.json文件。如下图<br>这里的话，我后面带了–save,但是我没有全局的package.json所以就会出错，你们可以先执行npm init来先生成package.json.<br><img src="http://ow47touqj.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%95%99%E7%A8%8B%E5%9B%BE%E7%89%871.png" alt="麒麟出品"><br>接下来你需要执行<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -g jasmine</div></pre></td></tr></table></figure></p>
<p>这一步是全局安装，让你的命令行可以理解jasmine命令</p>
<h2 id="三·初始化"><a href="#三·初始化" class="headerlink" title="三·初始化"></a>三·初始化</h2><p>然后你需要执行<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">jasmine init</div></pre></td></tr></table></figure></p>
<p>这一步会生出spec文件夹，里面有一个support，support里面有一个jasmine.json文件,这个好像可以使你找到测试文件<br>基本上我们会在这个spec里面写测试文件。我也不知道放在外面有什么情况发生。。。估计没什么事<br>如图：<br><img src="http://ow47touqj.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%95%99%E7%A8%8B%E5%9B%BE%E7%89%873.png" alt="麒麟出品"><br>到这里其实你就可以跑测试了，当然你还没写测试文件的话肯定是不行的。<br><strong>还有提醒的一句的是，你的测试文件的命名一定要带有**_spec.js,不然会找不到你的测试文件的,那两个**你随便填，但是后面的spec一定不能掉</strong><br>只需要执行下面的<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">jasmine</div></pre></td></tr></table></figure></p>
<h2 id="四·测试"><a href="#四·测试" class="headerlink" title="四·测试"></a>四·测试</h2><p>看到这里，你是不是会疑惑为什么和你以前测试的命令不一样，不要着急，马上就可以一样了<br>你需要执行下面这条命令，来生成全局的package.json文件<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm init -y</div></pre></td></tr></table></figure></p>
<p>这里的-y ，会自动生成你需要填写的东西（当然你也可以不加 -y,可以试试是什么结果）<br><img src="http://ow47touqj.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%95%99%E7%A8%8B%E5%9B%BE%E7%89%872.png" alt="麒麟出品"><br>到这里还没完，你需点开package.json文件，把里面的 “scripts”: {  “test”: <code>&quot;jasmine &amp;&amp; exit 1&quot;</code>},替换成灰底的部分<br>如下图：<br><img src="http://ow47touqj.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E5%9B%BE%E7%89%87%E6%95%99%E7%A8%8B4.png" alt="麒麟出品"><br>接下来你就可以愉快的用 npm test 跑测试了<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm test</div></pre></td></tr></table></figure></p>
<p><img src="http://ow47touqj.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%95%99%E7%A8%8B5.png" alt="麒麟出品"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/21/jasmine测试框架的使用/" data-id="cjf9vxkwd0001f4qspmx39jiy" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-用码云挂载页面" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/用码云挂载页面/" class="article-date">
  <time datetime="2017-11-03T07:47:12.749Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/用码云挂载页面/">用码云挂载页面</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>码云pages是2016年出来的。<br>在这里我简单的说一下github的使用<br><img src="http://upload-images.jianshu.io/upload_images/5349051-69a844b3bab12f8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>如果你还不会，那你就去百度一下，我相信比我讲的好多了(估计你看了也不会^~~^)<br>今天只讲关于码云pages托管</p>
<p><strong>首先你得创建个码云的账号，在这里为开源中国打call</strong></p>
<h2 id="一。创建一个新的项目"><a href="#一。创建一个新的项目" class="headerlink" title="一。创建一个新的项目"></a>一。创建一个新的项目</h2><p>码云不同于github，所以你必须把先他的.git文件clone下来<br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720171019204552.png" alt=""><br>直接点创建就好，别忘了你的项目名字！！！(现在就假设你的项目名字是pages)</p>
<h2 id="二。克隆到你需要上传的文件夹里面"><a href="#二。克隆到你需要上传的文件夹里面" class="headerlink" title="二。克隆到你需要上传的文件夹里面"></a>二。克隆到你需要上传的文件夹里面</h2><p>点击右边的黄色框框克隆！！！！然后如下图：<br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720171019204915.png" alt=""><br><strong>别忘了使用git命令</strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">git clone URL</div></pre></td></tr></table></figure></p>
<p>这里的URL就是你所复制的地址</p>
<p>克隆之后你会发现你的文件夹里多了一个包，那个包名就是你的项目名称,<br>.git文件就在里面<br>你可以里面的文件全部拿到外面这个包里。如下图(因为我拿出来了，剪切就好了，所以是下图的样子)：<br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720171019205145.png" alt=""></p>
<p>接下来你需要上传到项目上去了<br>这三条命令<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">git add .</div><div class="line">git commit -m &quot;注释说明&quot;</div><div class="line">git push -u origin master</div></pre></td></tr></table></figure></p>
<p>在这里我说一下，上面的我是直接推送到master分支上的，但是出于安全的考虑，一般是你需要在另一个分支上创建，然后合并，删除<br><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/" target="_blank" rel="external">详见廖雪峰的git教程</a><br>上传成功后，刷新你的项目页面。就可以看到上传上去的文件了<br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720171019205846.png" alt=""></p>
<h2 id="三。启动pages服务"><a href="#三。启动pages服务" class="headerlink" title="三。启动pages服务"></a>三。启动pages服务</h2><p><font color="#0099ff" size="7" face="黑体">注意，pages服务只会读取根目录下的index.html</font><br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720171019210050.png" alt=""><br>然后你直接点击启动就可以了，就会出现如下页面：<br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720171019210058.png" alt=""><br>上面的连接就是你的index.html的内容了</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/用码云挂载页面/" data-id="cjf9vxkwk0005f4qsu3ca5iqa" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-js高阶函数" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/js高阶函数/" class="article-date">
  <time datetime="2017-11-03T02:28:52.915Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/js高阶函数/">map,filter.reduce的区别</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>一张图及其形象的说明：<br><img src="http://ow47touqj.bkt.clouddn.com/filter_map_reduce.png" alt=""></p>
<h2 id="一-map"><a href="#一-map" class="headerlink" title="一.map"></a>一.map</h2><p>map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。<br>用一张图来说明：<br>来自廖雪峰的<br>代码实例：（初学者简单的使用就好了）<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> numbers = [<span class="number">1</span>, <span class="number">5</span>, <span class="number">10</span>, <span class="number">15</span>];</div><div class="line"><span class="keyword">let</span> doubles = numbers.map(<span class="function">(<span class="params">x</span>) =&gt;</span> &#123;</div><div class="line">   <span class="keyword">return</span> x * <span class="number">2</span>;</div><div class="line">&#125;);</div><div class="line"><span class="comment">// doubles is now [2, 10, 20, 30]</span></div><div class="line"><span class="comment">// numbers is still [1, 5, 10, 15]</span></div><div class="line"><span class="keyword">let</span> numbers = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">9</span>];</div><div class="line"><span class="keyword">let</span> roots = numbers.map(<span class="built_in">Math</span>.sqrt);</div><div class="line"><span class="comment">// roots is now [1, 2, 3]</span></div><div class="line"><span class="comment">// numbers is still [1, 4, 9]</span></div></pre></td></tr></table></figure></p>
<p><strong>map()的真正的语法：</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue, index, array</span>) </span>&#123; </div><div class="line">    <span class="comment">// Return element for new_array </span></div><div class="line">&#125;[, thisArg])</div></pre></td></tr></table></figure></p>
<p>参数说明：<br><strong>callback</strong> 生成新数组元素的函数，使用三个参数：</p>
<ol>
<li>currentValue<br>callback 的第一个参数，数组中正在处理的当前元素。</li>
<li>index<br>callback 的第二个参数，数组中正在处理的当前元素的索引。</li>
<li>array<br>callback 的第三个参数，map 方法被调用的数组。</li>
</ol>
<p><strong>thisArg</strong><br>可选的。执行 callback 函数时 使用的this 值。<br>返回值<br>一个新数组，每个元素都是回调函数的结果。<br>运行说明：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">10</span>] ;</div><div class="line"><span class="keyword">let</span> b =a.map(<span class="function"><span class="keyword">function</span>(<span class="params">value,index,array</span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(value,index,array);</div><div class="line">&#125;)</div><div class="line"><span class="comment">//1 0 [1,2,3,4,5,2,6,10]</span></div><div class="line"><span class="comment">//2 1 [1,2,3,4,5,2,6,10]</span></div><div class="line"><span class="comment">//3 2 [1,2,3,4,5,2,6,10]...</span></div></pre></td></tr></table></figure></p>
<p>来自微软的map说明：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Define an object that contains a divisor property and</span></div><div class="line"><span class="comment">// a remainder function.</span></div><div class="line"><span class="keyword">var</span> obj = &#123;</div><div class="line">    divisor: <span class="number">10</span>,</div><div class="line">    remainder: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> value % <span class="keyword">this</span>.divisor;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="comment">// Create an array.</span></div><div class="line"><span class="keyword">var</span> numbers = [<span class="number">6</span>, <span class="number">12</span>, <span class="number">25</span>, <span class="number">30</span>];</div><div class="line"><span class="comment">// Get the remainders.</span></div><div class="line"><span class="comment">// The obj argument specifies the this value in the callback function.</span></div><div class="line"><span class="keyword">var</span> result = numbers.map(obj.remainder, obj);</div><div class="line"><span class="built_in">document</span>.write(result);</div><div class="line"><span class="comment">// Output:</span></div><div class="line"><span class="comment">// 6,2,5,0</span></div></pre></td></tr></table></figure></p>
<p>暂时就先这样吧，以后再改<br>碰到的一个有趣的地方</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">[<span class="string">"1"</span>,<span class="string">"2"</span>,<span class="string">"3"</span>].map(<span class="built_in">parseInt</span>)<span class="comment">//会得到什么?</span></div><div class="line"><span class="comment">// 你可能觉的会是[1, 2, 3]</span></div><div class="line"><span class="comment">//但是现实总是残酷的</span></div><div class="line"><span class="comment">// 但实际的结果是 [1, NaN, NaN]</span></div><div class="line"><span class="comment">// 通常使用parseInt时,只需要传递一个参数.</span></div><div class="line"><span class="comment">// 但实际上,parseInt可以有两个参数.第二个参数是进制数.</span></div><div class="line"><span class="comment">// 可以通过语句"alert(parseInt.length)===2"来验证.</span></div><div class="line"><span class="comment">// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, </span></div><div class="line"><span class="comment">// 元素索引, 原数组本身.</span></div><div class="line"><span class="comment">// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,</span></div><div class="line"><span class="comment">// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">returnInt</span>(<span class="params">element</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> <span class="built_in">parseInt</span>(element, <span class="number">10</span>);</div><div class="line">&#125;</div><div class="line">[<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>].map(returnInt); <span class="comment">// [1, 2, 3]</span></div><div class="line"><span class="comment">// 意料之中的结果</span></div><div class="line"><span class="comment">// 也可以使用简单的箭头函数，结果同上</span></div><div class="line">[<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>].map( <span class="function"><span class="params">str</span> =&gt;</span> <span class="built_in">parseInt</span>(str) );</div><div class="line"><span class="comment">// 一个更简单的方式:</span></div><div class="line">[<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>].map(<span class="built_in">Number</span>); <span class="comment">// [1, 2, 3]</span></div><div class="line"><span class="comment">// 与`parseInt` 不同，下面的结果会返回浮点数或指数:</span></div><div class="line">[<span class="string">'1.1'</span>, <span class="string">'2.2e2'</span>, <span class="string">'3e300'</span>].map(<span class="built_in">Number</span>); <span class="comment">// [1.1, 220, 3e+300]</span></div></pre></td></tr></table></figure>
<h2 id="二-filter"><a href="#二-filter" class="headerlink" title="二.filter"></a>二.filter</h2><p>filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。它叫过滤选择器<br>和上面一样，直接拿代码<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">isBigEnough</span>(<span class="params">value</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> value &gt;= <span class="number">10</span>;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> filtered = [<span class="number">12</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>].filter(isBigEnough);</div><div class="line"><span class="comment">// filtered is [12, 130, 44]</span></div><div class="line"><span class="comment">// ES6 way</span></div><div class="line"><span class="keyword">const</span> isBigEnough = <span class="function"><span class="params">value</span> =&gt;</span> value &gt;= <span class="number">10</span>;<span class="comment">//很骚的函数</span></div><div class="line"><span class="keyword">let</span> [...spraed]= [<span class="number">12</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>];<span class="comment">//解构赋值</span></div><div class="line"><span class="keyword">let</span> filtered = spraed.filter(isBigEnough);</div><div class="line"><span class="comment">// filtered is [12, 130, 44]</span></div></pre></td></tr></table></figure></p>
<p>语法可以参考map的，这里就简单说明<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> new_array = arr.filter(callback[, thisArg])</div></pre></td></tr></table></figure></p>
<ol>
<li>callback<br>用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。<br>返回true表示保留该元素（通过测试），false则不保留。</li>
<li>thisArg<br>可选。执行 callback 时的用于 this 的值。<br>返回值<br>一个新的通过测试的元素的集合的数组</li>
</ol>
<h2 id="三-reduce"><a href="#三-reduce" class="headerlink" title="三.reduce"></a>三.reduce</h2><p>reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> total = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].reduce(<span class="function"><span class="keyword">function</span>(<span class="params">sum, value</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> sum + value;</div><div class="line">&#125;, <span class="number">0</span>);</div><div class="line"><span class="comment">// total is 6</span></div><div class="line"><span class="comment">//居然可以用reduce降维</span></div><div class="line"><span class="keyword">var</span> flattened = [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]].reduce(<span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> a.concat(b);</div><div class="line">&#125;, []);</div><div class="line"><span class="comment">// flattened is [0, 1, 2, 3, 4, 5]</span></div></pre></td></tr></table></figure></p>
<p>语法<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">array.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">accumulator, currentValue, currentIndex, array</span>), <span class="title">initialValue</span>)</span></div></pre></td></tr></table></figure></p>
<p>说明<br><strong>callback</strong><br>执行数组中每个值的函数，包含四个参数</p>
<ol>
<li>accumulator<br>上一次调用回调返回的值，或者是提供的初始值（initialValue）</li>
<li>currentValue<br>数组中正在处理的元素</li>
<li>currentIndex<br>数据中正在处理的元素索引，如果提供了 initialValue ，从0开始；否则从1开始</li>
<li>array<br>调用 reduce 的数组</li>
<li>initialValue<br>可选项，其值用于第一次调用 callback 的第一个参数。如果没有设置初始值，则将数组中的第一个元素作为初始值。空数组调用reduce时没有设置初始值将会报错。<br>返回值<br>函数累计处理的结果<br>注意:<br>不提供 initialValue ，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。提供 initialValue ，从索引0开始。</li>
</ol>
<p>如果数组为空并且没有提供initialValue， 会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。</p>
<p>提供 initialValue 通常更安全，正如下面的例子，如果没有提供initialValue，则可能有三种输出：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> maxCallback = <span class="function">(<span class="params"> pre, cur </span>) =&gt;</span> <span class="built_in">Math</span>.max( pre.x, cur.x );</div><div class="line"><span class="keyword">var</span> maxCallback2 = <span class="function">(<span class="params"> max, cur </span>) =&gt;</span> <span class="built_in">Math</span>.max( max, cur );</div><div class="line"><span class="comment">// reduce() without initialValue</span></div><div class="line">[ &#123; <span class="attr">x</span>: <span class="number">22</span> &#125;, &#123; <span class="attr">x</span>: <span class="number">42</span> &#125; ].reduce( maxCallback ); <span class="comment">// 42</span></div><div class="line">[ &#123; <span class="attr">x</span>: <span class="number">22</span> &#125;            ].reduce( maxCallback ); <span class="comment">// &#123; x: 22 &#125;</span></div><div class="line">[                      ].reduce( maxCallback ); <span class="comment">// TypeError</span></div><div class="line"><span class="comment">// map/reduce; better solution, also works for empty arrays</span></div><div class="line">[ &#123; <span class="attr">x</span>: <span class="number">22</span> &#125;, &#123; <span class="attr">x</span>: <span class="number">42</span> &#125; ].map( <span class="function"><span class="params">el</span> =&gt;</span> el.x )</div><div class="line">                        .reduce( maxCallback2, -<span class="literal">Infinity</span> );</div></pre></td></tr></table></figure></p>
<p>reduce的运行<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">[<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>].reduce(<span class="function"><span class="keyword">function</span>(<span class="params">accumulator, currentValue, currentIndex, array</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> accumulator + currentValue;</div><div class="line"><span class="comment">//箭头操作</span></div><div class="line">[<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>].reduce( <span class="function">(<span class="params">prev, curr</span>) =&gt;</span> prev + curr );</div><div class="line"><span class="comment">//同样的结果</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>懒得弄表格了，直接上图<br><img src="http://ow47touqj.bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720170922162803.png" alt=""><br>[相关reduce文档(来自MDN)(<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" target="_blank" rel="external">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce</a>)<br>相信你看了这么多，应该可以简单的使用这三个函数了</p>
<h2 id="再讲一下foreach吧"><a href="#再讲一下foreach吧" class="headerlink" title="再讲一下foreach吧"></a>再讲一下foreach吧</h2><p>forEach() 方法对数组的每个元素执行一次提供的函数。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> a = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</div><div class="line">a.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">element</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(element);</div><div class="line">&#125;);</div><div class="line"><span class="comment">// a</span></div><div class="line"><span class="comment">// b</span></div><div class="line"><span class="comment">// c</span></div></pre></td></tr></table></figure></p>
<p>语法<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">array.forEach(callback(currentValue, index, array)&#123;</div><div class="line">    <span class="comment">//do something</span></div><div class="line">&#125;, <span class="keyword">this</span>)</div><div class="line">array.forEach(callback[, thisArg])</div></pre></td></tr></table></figure></p>
<p>现在，你会发现foreach和map,reduce好像可以通用,的确，在某些方面你随便用哪个都可以。<br>但是，你需要知道foreach的返回值是undefined<br>参数<br><strong>callback</strong><br>为数组中每个元素执行的函数，该函数接收三个参数：</p>
<ol>
<li>currentValue(当前值)<br>数组中正在处理的当前元素。</li>
<li>index(索引)<br>数组中正在处理的当前元素的索引。</li>
<li>array<br>forEach()方法正在操作的数组。<br><strong>thisArg</strong>可选<br>可选参数。当执行回调 函数时用作this的值(参考对象)。<br><strong>返回值</strong><br>undefined.<br>个人不建议使用这个东西，不为什么，就任性 ;<br><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank" rel="external">详情请参考MND文档</a></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/js高阶函数/" data-id="cjf9vxkwj0004f4qsozyxaq53" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-js的number的数据处理" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/js的number的数据处理/" class="article-date">
  <time datetime="2017-11-03T02:06:58.839Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/js的number的数据处理/">js的number的数据处理（取位）</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="一-取整"><a href="#一-取整" class="headerlink" title="一.取整"></a>一.取整</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字</span></div><div class="line">NumberObject.toFixed(num)<span class="comment">//num必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。</span></div><div class="line">(<span class="number">14.24</span>).toFixed(<span class="number">1</span>)<span class="comment">//14.2,14.24.toFixed(1)也是可以的，但是为了友好度，看的舒服，还是加上圆括号吧</span></div><div class="line"></div><div class="line"><span class="built_in">parseInt</span>(<span class="number">5</span>/<span class="number">2</span>)<span class="comment">//2//丢弃小数部分,保留整数部分</span></div><div class="line"></div><div class="line"><span class="built_in">Math</span>.ceil(<span class="number">5</span>/<span class="number">2</span>)<span class="comment">//3//向上取整,有小数就整数部分加1</span></div><div class="line">.</div><div class="line"><span class="built_in">Math</span>.round(<span class="number">5</span>/<span class="number">2</span>)<span class="comment">//3//四舍五入</span></div><div class="line"><span class="built_in">Math</span>.round(<span class="number">2.4</span>)<span class="comment">//2</span></div><div class="line"></div><div class="line"><span class="built_in">Math</span>.floor(<span class="number">5</span>/<span class="number">2</span>)<span class="comment">//2//向下取整</span></div></pre></td></tr></table></figure>
<p>Math是一个类，继承与Object,所以用Math的方法必须带上类名Math<br>所以的number数据都是number的一个实例，是可以直接调用Number的方法的<br><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="external">关于Number的更多方法</a><br><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math" target="_blank" rel="external">关于Math的更多方法</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/js的number的数据处理/" data-id="cjf9vxkwg0002f4qss32r0igl" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-常见的排序方法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/常见的排序方法/" class="article-date">
  <time datetime="2017-11-03T01:44:28.214Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/常见的排序方法/">常见的排序方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="一-冒泡排序"><a href="#一-冒泡排序" class="headerlink" title="一.冒泡排序"></a>一.冒泡排序</h2><ol>
<li>比较相邻的元素。如果第一个比第二个大，就交换他们两个。</li>
<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。</li>
<li>针对所有的元素重复以上的步骤，除了最后一个。</li>
<li>持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。</li>
</ol>
<p>冒泡排序的动画演示<br><img src="http://bubkoo.qiniudn.com/Bubble_sort_animation.gif" alt="来自维基百科"><br>代码实现<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">bubbleSort</span>(<span class="params">array</span>) </span>&#123;</div><div class="line">   <span class="keyword">var</span> length = array.length,</div><div class="line">       i,</div><div class="line">       j,</div><div class="line">       temp;</div><div class="line">   <span class="keyword">for</span> (i = length - <span class="number">1</span>; <span class="number">0</span> &lt; i; i--) &#123;</div><div class="line">       <span class="keyword">for</span> (j = <span class="number">0</span>; j &lt; i; j++) &#123;</div><div class="line">           <span class="keyword">if</span> (array[j] &gt; array[j + <span class="number">1</span>]) &#123;</div><div class="line">               temp = array[j];</div><div class="line">               array[j] = array[j + <span class="number">1</span>];</div><div class="line">               array[j + <span class="number">1</span>] = temp;</div><div class="line">           &#125;</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">return</span> array;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h2 id="二-选择排序"><a href="#二-选择排序" class="headerlink" title="二.选择排序"></a>二.选择排序</h2><ol>
<li>假设第一个是最大（或者最小）的，然后跟其他数比较，比他大（小）的就换位置</li>
<li>每一次遍历只找出当前最大（小）的<br>总之，选择排序（Selection Sort）是一种简单直观的排序算法。它的工作原理如下，<br>首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</li>
</ol>
<p>选择排序图示<br><img src="http://bubkoo.qiniudn.com/selection_sort_animation.gif" alt="来自维基百科"><br><img src="http://bubkoo.qiniudn.com/Selection-Sort-Animation.gif" alt=""><br>代码实现<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">selectionSort</span>(<span class="params">array</span>) </span>&#123;</div><div class="line">  <span class="keyword">var</span> length = array.length,</div><div class="line">      i,</div><div class="line">      j,</div><div class="line">      minIndex,</div><div class="line">      minValue,</div><div class="line">      temp;</div><div class="line">  <span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; length - <span class="number">1</span>; i++) &#123;</div><div class="line">    minIndex = i;</div><div class="line">    minValue = array[minIndex];</div><div class="line">    <span class="keyword">for</span> (j = i + <span class="number">1</span>; j &lt; length; j++) &#123;</div><div class="line">      <span class="keyword">if</span> (array[j] &lt; minValue) &#123;</div><div class="line">        minIndex = j;</div><div class="line">        minValue = array[minIndex];</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">    <span class="comment">// 交换位置</span></div><div class="line">    temp = array[i];</div><div class="line">    array[i] = minValue;</div><div class="line">    array[minIndex] = temp;</div><div class="line">  &#125;</div><div class="line">  <span class="keyword">return</span> array</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>选择排序和冒泡排序很容易弄混，ps:选择排序需要记住下标，冒泡排序不需要</p>
<h2 id="三-其他排序"><a href="#三-其他排序" class="headerlink" title="三.其他排序"></a>三.其他排序</h2><p>去看这位大佬的博客，等以后看懂了在cv过来（^..^）</p>
<ol>
<li><a href="http://bubkoo.com/2014/01/12/sort-algorithm/quick-sort/" target="_blank" rel="external">快速排序</a></li>
<li><a href="http://bubkoo.com/2014/01/14/sort-algorithm/heap-sort/" target="_blank" rel="external">堆排序</a></li>
<li><a href="http://bubkoo.com/2014/01/14/sort-algorithm/insertion-sort/" target="_blank" rel="external">插入排序</a></li>
<li><a href="http://bubkoo.com/2014/01/15/sort-algorithm/shell-sort/" target="_blank" rel="external">希尔排序</a></li>
<li><a href="http://bubkoo.com/2014/01/15/sort-algorithm/merge-sort/" target="_blank" rel="external">归并排序</a></li>
<li><a href="http://bubkoo.com/2014/01/15/sort-algorithm/shaker-sort/" target="_blank" rel="external">鸡尾酒排序(冒泡的变形)</a></li>
<li><a href="http://bubkoo.com/2014/01/15/sort-algorithm/bogo-sort/" target="_blank" rel="external">猴子排序(看运气的排序)</a></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/常见的排序方法/" data-id="cjf9vxkwm0007f4qs74vi7i91" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-数组降维" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/数组降维/" class="article-date">
  <time datetime="2017-11-03T01:30:14.294Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/数组降维/">数组降维</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>将多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，除了使用朴素的循环转换以外，我们还可以利用Javascript的语言特性实现更为简洁优雅的转换。本文将从朴素的循环转换开始，逐一介绍三种常用的转换方法，并借此简单回顾Array.prototype.concat方法和Function.prototype.apply方法。</p>
<p>以下代码将以把二维数组降维到一维数组为例。</p>
<h2 id="1-朴素的转换"><a href="#1-朴素的转换" class="headerlink" title="1. 朴素的转换"></a>1. 朴素的转换</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">reduceDimension</span>(<span class="params">arr</span>) </span>&#123;    </div><div class="line">  <span class="keyword">var</span> reduced = [];    </div><div class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;    </div><div class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr[i].length; j++) &#123;            					</div><div class="line">          reduced.push(arr[i][j]);   </div><div class="line">        &#125;   </div><div class="line">    &#125;   </div><div class="line">  <span class="keyword">return</span> reduced;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>此方法思路简单，利用双重循环遍历二维数组中的每个元素并放到新数组中。</p>
<h2 id="2-利用concat转换"><a href="#2-利用concat转换" class="headerlink" title="2. 利用concat转换"></a>2. 利用concat转换</h2><p>先来回顾一下MDN上对于该方法的介绍：</p>
<p>“concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat" target="_blank" rel="external">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat</a></p>
<p>即如果concat方法的参数是一个元素，该元素会被直接插入到新数组中；如果参数是一个数组，该数组的各个元素将被插入到新数组中；将该特性应用到代码中：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">reduceDimension</span>(<span class="params">arr</span>) </span>&#123;</div><div class="line">  <span class="keyword">var</span> reduced = [];</div><div class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++)&#123;</div><div class="line">    reduced = reduced.concat(arr[i]);</div><div class="line">  &#125;    </div><div class="line">  <span class="keyword">return</span> reduced;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p><strong>在MDN上看到的用reduce 和concat</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> a =   [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]].reduce(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> a.concat(b);</div><div class="line">&#125;, []);<span class="comment">//a = [0,1,2,3,4,5]</span></div></pre></td></tr></table></figure></p>
<p>arr的每一个元素都是一个数组，作为concat方法的参数，数组中的每一个子元素又都会被独立插入进新数组。<br>利用concat方法，我们将双重循环简化为了单重循环。</p>
<ol>
<li>利用apply和concat转换<br>按照惯例，先来回顾一下MDN上对于apply方法的介绍：</li>
</ol>
<p>“The apply() method calls a function with a given this value and arguments provided as an array.”</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" target="_blank" rel="external">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply</a></p>
<p>即apply方法会调用一个函数，apply方法的第一个参数会作为被调用函数的this值，apply方法的第二个参数（一个数组，或类数组的对象）会作为被调用对象的arguments值，也就是说该数组的各个元素将会依次成为被调用函数的各个参数；将该特性应用到代码中：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">reduceDimension</span>(<span class="params">arr</span>) </span>&#123;</div><div class="line"><span class="keyword">return</span> <span class="built_in">Array</span>.prototype.concat.apply([], arr);</div><div class="line">&#125;</div><div class="line"><span class="string">``</span><span class="string">`   </span></div><div class="line"><span class="string"></span></div><div class="line"><span class="string">arr作为apply方法的第二个参数，本身是一个数组，数组中的每一个元素（还是数组，即二维数组的第二维）会被作为参数依次传入到concat中，效果等同于[].concat([1,2], [3,4], [5,6])。</span></div><div class="line"><span class="string">利用apply方法，我们将单重循环优化为了一行代码，很简洁有型有木有啊</span></div><div class="line"><span class="string">读者也可参照本文思路，自己利用递归实现N维数组降维的逻辑。(instanceof的用法后续再说)</span></div><div class="line"><span class="string"></span></div><div class="line"><span class="string">`</span><span class="string">``</span>js</div><div class="line"><span class="keyword">var</span> arrs = [<span class="number">1</span>, [<span class="number">23</span>, <span class="number">32</span>], <span class="number">42</span>, [<span class="number">0</span>, <span class="number">33</span>, [<span class="number">55</span>, <span class="number">39</span>, [<span class="number">10</span>, <span class="number">331</span>, [<span class="number">15</span>, <span class="number">34</span>]]]]];</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">jiangwei1</span>(<span class="params">arrs</span>) </span>&#123;</div><div class="line">  <span class="keyword">var</span> newarrs = [];</div><div class="line">  <span class="function"><span class="keyword">function</span> <span class="title">digui</span>(<span class="params">arrs</span>) </span>&#123;</div><div class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arrs.length; i++) &#123;</div><div class="line">      <span class="keyword">if</span> (arrs[i] <span class="keyword">instanceof</span> <span class="built_in">Array</span>) &#123;</div><div class="line">        digui(arrs[i]);</div><div class="line">      &#125; <span class="keyword">else</span> &#123;</div><div class="line">        newarrs.push(arrs[i]);</div><div class="line">    &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">  digui(arrs);</div><div class="line">  <span class="keyword">return</span> newarrs</div><div class="line">&#125;</div><div class="line">jiangwei1(arrs);<span class="comment">//[1, 23, 32, 42, 0, 33, 55, 39, 10, 331, 15, 34]</span></div></pre></td></tr></table></figure></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/数组降维/" data-id="cjf9vxkwl0006f4qscg0tiat0" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-函数在其他文件里面调用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/函数在其他文件里面调用/" class="article-date">
  <time datetime="2017-11-03T01:15:36.127Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/函数在其他文件里面调用/">函数在其他文件里面调用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <ol>
<li>最佳解决方案</li>
</ol>
<p>你可以这样做：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = &#123;</div><div class="line">    method: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</div><div class="line">    otherMethod: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>甚至只是：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">exports.method = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;;</div><div class="line">exports.otherMethod = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;;</div></pre></td></tr></table></figure></p>
<ol>
<li>次佳解决方案</li>
</ol>
<p>要导出多个函数，您可以像这样列出它们：(个人推荐使用这样，易懂)<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = &#123;</div><div class="line">    function1,</div><div class="line">    function2,</div><div class="line">    function3</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>然后在另一个文件中访问它们：(个人更喜欢这种)<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> myFunctions = <span class="built_in">require</span>(<span class="string">"./lib/file.js"</span>)</div><div class="line"><span class="comment">//然后可以通过调用以下命令调用每个函数：</span></div><div class="line">myFunctions.function1</div><div class="line">myFunctions.function2</div><div class="line">myFunctions.function3</div></pre></td></tr></table></figure></p>
<ol>
<li>第三种解决方案</li>
</ol>
<p>这只是为了我的参考，因为我想要实现的是可以实现的。<br>在module.js<br>我们可以做这样的事情<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params"> firstArg, secondArg </span>) </span>&#123;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">firstFunction</span> (<span class="params"> </span>) </span>&#123; ... &#125;</div><div class="line"><span class="function"><span class="keyword">function</span>  <span class="title">secondFunction</span> (<span class="params"> </span>) </span>&#123; ... &#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">thirdFunction</span> (<span class="params"> </span>) </span>&#123; ... &#125;</div><div class="line"><span class="keyword">return</span> &#123; <span class="attr">firstFunction</span>: firstFunction, <span class="attr">secondFunction</span>: secondFunction,</div><div class="line">thirdFunction: thirdFunction &#125;;</div><div class="line">&#125;</div><div class="line"><span class="comment">//在main.js</span></div><div class="line"><span class="keyword">var</span> name = <span class="built_in">require</span>(<span class="string">'module'</span>)(firstArg, secondArg);</div></pre></td></tr></table></figure></p>
<ol>
<li>第四种方案</li>
</ol>
<p>您可以编写一个在其他功能之间手动委托的功能：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">arg</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span>(arg <span class="keyword">instanceof</span> <span class="built_in">String</span>) &#123;</div><div class="line">        <span class="keyword">return</span> doStringThing.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>);</div><div class="line">    &#125;<span class="keyword">else</span>&#123;</div><div class="line">        <span class="keyword">return</span> doObjectThing.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>);</div><div class="line">    &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/函数在其他文件里面调用/" data-id="cjf9vxkwo0008f4qsr08artwn" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-hexo+github搭blog" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/11/03/hexo+github搭blog/" class="article-date">
  <time datetime="2017-11-03T00:37:28.414Z" itemprop="datePublished">2017-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/11/03/hexo+github搭blog/">hexo+github搭轻量级blog</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>github 有一个非常强大的功能 —— GitHub Page</p>
<p>GitHub Pages 有以下几个优点：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">轻量级的博客系统，没有麻烦的配置</div><div class="line">免费空间，享受 Git 版本管理功能</div><div class="line">使用标记语言，比如 Markdown</div><div class="line">无需自己搭建服务器</div><div class="line">可以绑定自己的域名</div></pre></td></tr></table></figure></p>
<p>当然他也有缺点：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">搭配模板系统，相当于静态页发布，每运行生成一次都必须遍历全部的文本文件，网站越大，生成时间越长</div><div class="line">动态程序的部分相当局限，比如没有评论，不过有解决方案</div><div class="line">基于 Git，很多东西需要定制，不像 Wordpress 有强大的后台</div></pre></td></tr></table></figure></p>
<p>要想搭建漂亮的 blog，还需要模板系统，官方推荐的是 jekyll，但是配置稍复杂，我们使用另一个选择 —— hexo，一个简单地、轻量地、基于 Node 的一个静态博客框架。<br>下面介绍下如何使用 hexo + github pages 搭建个人博客 。</p>
<h2 id="一-安装GIt"><a href="#一-安装GIt" class="headerlink" title="一. 安装GIt"></a>一. 安装GIt</h2><p><strong>1.for windows:</strong><br><a href="https://github.com/git-for-windows/git/releases/tag/v2.14.1.windows.1" target="_blank" rel="external">https://github.com/git-for-windows/git/releases/tag/v2.14.1.windows.1</a><br><strong>2.for Linux</strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ sudo apt-get update</div><div class="line">$ sudo apt-get install git</div></pre></td></tr></table></figure></p>
<p>安装下载完成后，可以使用下面的命令行，确认git的版本：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ git –version</div></pre></td></tr></table></figure></p>
<h2 id="二-安装node"><a href="#二-安装node" class="headerlink" title="二.安装node"></a>二.安装node</h2><p><strong>1. for windows</strong><br><a href="https://nodejs.org/en/download/" target="_blank" rel="external">https://nodejs.org/en/download/</a></p>
<p><strong>2. for linux</strong></p>
<ol>
<li>先装一个 nvm ( <a href="https://github.com/creationix/nvm" target="_blank" rel="external">https://github.com/creationix/nvm</a> )<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash</div></pre></td></tr></table></figure>
</li>
</ol>
<p>nvm 的全称是 Node Version Manager，之所以需要这个工具，是因为 Node.js 的各种特性都没有稳定下来，所以我们经常由于老项目或尝新的原因，需要切换各种版本。</p>
<p>安装完成后，你的 shell 里面应该就有个 nvm 命令了，调用它试试 , 有输出 , 则 nvm 安装成功<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ nvm</div></pre></td></tr></table></figure></p>
<ol>
<li>使用 nvm 的命令安装 Node.js 最新版<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ nvm install node</div></pre></td></tr></table></figure>
</li>
</ol>
<p>查看安装效果<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">nvm use node</div></pre></td></tr></table></figure></p>
<p>显示 :<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Now using node v6.11.0 (npm v3.10.10)</div></pre></td></tr></table></figure></p>
<h2 id="三-安装-hexo"><a href="#三-安装-hexo" class="headerlink" title="三. 安装 hexo"></a>三. 安装 hexo</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-cli -g</div></pre></td></tr></table></figure>
<h2 id="四-初始化-hexo-博客项目"><a href="#四-初始化-hexo-博客项目" class="headerlink" title="四. 初始化 hexo 博客项目"></a>四. 初始化 hexo 博客项目</h2><ol>
<li>新建一个文件夹 ( 我是在桌面创建的 HEXO )</li>
<li>在Hexo文件下，右键运行Git Bash，输入命令：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo init</div></pre></td></tr></table></figure>
</li>
</ol>
<p>会生成如下图所示的文件结构 :<br><img src="http://owf7r558c.bkt.clouddn.com/hexo1.png" alt=""></p>
<p>下面对文件目录做个简单介绍 :<br><strong>1. _config.yml</strong><br>全局配置文件，网站的很多信息都在这里配置，诸如网站名称，副标题，描述，作者，语言，主题，部署等等参数, 这个文件下面会做较为详细的介绍 。</p>
<p><strong>2. scaffolds</strong><br>scaffolds是“ 脚手架、骨架 ”的意思，当你新建一篇文章（hexo new ‘title’）的时候，hexo是根据这个目录下的文件进行构建的 。</p>
<p><strong>3. package.json</strong><br>hexo框架的参数和所依赖插件，如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">“name”: “hexo-site”,</div><div class="line">“version”: “0.0.0”,</div><div class="line">“private”: true,</div><div class="line">“hexo”: &#123;</div><div class="line">“version”: “”</div><div class="line">&#125;,</div><div class="line">“dependencies”: &#123;</div><div class="line">“hexo”: “^3.2.0”,</div><div class="line">“hexo-generator-archive”: “^0.1.4”,</div><div class="line">“hexo-generator-category”: “^0.1.3”,</div><div class="line">“hexo-generator-index”: “^0.2.0”,</div><div class="line">“hexo-generator-tag”: “^0.2.0”,</div><div class="line">“hexo-renderer-ejs”: “^0.3.0”,</div><div class="line">“hexo-renderer-stylus”: “^0.3.1”,</div><div class="line">“hexo-renderer-marked”: “^0.3.0”,</div><div class="line">“hexo-server”: “^0.2.0”</div><div class="line">&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>如果后期我们想安装一些插件, 也会写入 package.json 当中 .</p>
<p><strong>4. source</strong><br>这个目录很重要，新建的文章都是在保存在这个目录下的.</p>
<p>_posts 。需要新建的博文都放在 _posts 目录下。</p>
<p>_posts 目录下是一个个 markdown 文件。你应该可以看到一个 hello-world.md 的文件，文章就在这个文件中编辑 。</p>
<p>_posts 目录下的md文件，会被编译成html文件，放到 public （此文件现在应该没有，因为你还没有编译过）文件夹下。</p>
<p><strong>5. themes</strong><br>网站主题目录，hexo有非常好的主题拓展，支持的主题也很丰富。该目录下，每一个子目录就是一个主题</p>
<p><strong>6. 我们打开 theme 文件夹下的主题文件夹, 会发现也有一个 _config.yml 文件</strong><br>_config.yml 文件中的内容，是主题的一个配置信息</p>
<p>_config.yml 采用YAML语法格式，具体配置可以参考官方文档</p>
<h2 id="五-本地浏览博客"><a href="#五-本地浏览博客" class="headerlink" title="五. 本地浏览博客"></a>五. 本地浏览博客</h2><p>分别输入下面两条命令 :<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ hexo g</div><div class="line">$ hexo s</div></pre></td></tr></table></figure></p>
<p>在浏览器中输入 : <a href="http://localhost:4000/" target="_blank" rel="external">http://localhost:4000/</a></p>
<p>会看到 :<br><img src="http://owf7r558c.bkt.clouddn.com/hexo2.png" alt=""></p>
<h2 id="六-部署到-Github-上"><a href="#六-部署到-Github-上" class="headerlink" title="六. 部署到 Github 上"></a>六. 部署到 Github 上</h2><ol>
<li>申请Github账号 ( 别忘了邮箱验证 )</li>
<li><p>新建一个 Repository , 注意仓库的名字前缀必须和自己 github 的用户名保持严格一致<br><img src="http://owf7r558c.bkt.clouddn.com/hexo3.png" alt=""></p>
</li>
<li><p>在_config.yml进行配置<br><img src="http://owf7r558c.bkt.clouddn.com/hexo4.png" alt=""></p>
</li>
</ol>
<p>在 deploy 中配置自己的仓库信息 ( 注意冒号后面有空格 )</p>
<ol>
<li>安装hexo-deployer-git自动部署发布工具<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-deployer-git -–save</div></pre></td></tr></table></figure>
</li>
</ol>
<p>5.发布到Github</p>
<p>输入如下命令 :<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</div></pre></td></tr></table></figure></p>
<p>然后输入自己的 Github 用户名和密码即可</p>
<ol>
<li>在浏览器中输入 <a href="https://coolcodetribe.github.io/" target="_blank" rel="external">https://coolcodetribe.github.io/</a> 便可以打开自己的博客啦 !!!</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://seveneyes.top/2017/11/03/hexo+github搭blog/" data-id="cjf9vxkw70000f4qsv62cbjev" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">March 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">November 2017</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/03/27/入门教程/">入门教程</a>
          </li>
        
          <li>
            <a href="/2017/11/21/jasmine测试框架的使用/">jasmine测试框架的使用</a>
          </li>
        
          <li>
            <a href="/2017/11/03/用码云挂载页面/">用码云挂载页面</a>
          </li>
        
          <li>
            <a href="/2017/11/03/js高阶函数/">map,filter.reduce的区别</a>
          </li>
        
          <li>
            <a href="/2017/11/03/js的number的数据处理/">js的number的数据处理（取位）</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 SevenEyes<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>